{% extends "template.html" %}
{% block js %}
<script type="text/javascript">
    $(document).ready(function() {
        $("form#addHouse").validate();
    });
</script>
{% endblock js %}
{% block left %}
<h2>Plot: {{plot.plotName}}</h2>
<form id="addHouse" action="{% url AddHouse %}" enctype="multipart/form-data" method="post">
    <div><label>House No.:</label><input type="text" name="houseNo"  class="required"/></div><br/>
    <div><label>Select House Type</label>
        <select name="houseType" class="required">
            <option value=""> Select One</option>
            {% for type in houseTypes %}
            <option value="{{type.houseType}}">{{type.houseType}}</option>
            {% endfor %}
        </select>
    </div><br/>
    <div><label>Select House Status</label>
        <select name="occupancyStatus" class="required">
            <option value="">Select One</option>
            <option value="OCCUPIED"> Occupied</option>
            <option value="VACANT">Vacant</option>
        </select>
    </div><br/>
    <input type="hidden" name="plotKey" value="{{plot.key}}"/>
    <div><input type="submit" value="Save" /></div>
</form>
{% endblock left%}
{% block right %}
<h2>Houses</h2>
<table>
    <tr>
        <th>House no</th>
        <th>House Type</th>
        <th>Occupancy Status</th>
    </tr>
    {% for house in houses %}
    <tr>
        <td>{{house.houseNo}}</td>
        <td>{{house.houseType}}</td>
        <td>{{house.occupancyStatus}}</td>
        <td><a href="">Current Tenant</a></td>
    </tr>
    {% endfor %}
</table>
{% endblock right%}